Angular Material ইন্সটল করা

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material এর পরিচিতি |
2
2

Angular Material ইন্সটল করা খুবই সহজ এবং এটি অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য ম্যাটেরিয়াল ডিজাইনের কম্পোনেন্ট যোগ করার প্রক্রিয়া। নিচে Angular Material ইন্সটল করার ধাপগুলো বর্ণনা করা হলো।


পূর্বপ্রস্তুতি

Angular Material ইন্সটল করার আগে নিশ্চিত করুন যে:

  • আপনার সিস্টেমে Node.js এবং npm ইন্সটল করা আছে।
  • Angular CLI (Command Line Interface) ইন্সটল করা আছে এবং অ্যাপ্লিকেশন তৈরি করা হয়েছে।

Angular CLI ইন্সটল করতে নিচের কমান্ড ব্যবহার করুন:

npm install -g @angular/cli

অ্যাপ্লিকেশন তৈরি করতে:

ng new my-angular-app
cd my-angular-app

Angular Material ইন্সটল করার ধাপসমূহ

Angular Material ইন্সটল করা

Angular Material ইন্সটল করতে নিচের কমান্ডটি রান করুন:

ng add @angular/material
ইন্সটল করার সময় যেসব অপশন নির্বাচন করতে হবে:
  • Theme: আপনি কোন থিম ব্যবহার করবেন (উদাহরণ: Indigo/Pink, Purple/Green ইত্যাদি)।
  • Global Typography: Angular Material Typography স্টাইল ব্যবহার করতে চাইলে এটি নির্বাচন করুন।
  • Animations: Material Design এর অ্যানিমেশন সাপোর্টের জন্য BrowserAnimationsModule ইনস্টল করতে এটি নির্বাচন করুন।

Angular Material সেটআপ

Browser Animations Module যোগ করা

Angular Material এর অ্যানিমেশন ফিচার কাজ করার জন্য BrowserAnimationsModule ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে যোগ করুন:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
প্রয়োজনীয় Material Module ইমপোর্ট করা

আপনার অ্যাপ্লিকেশনে ব্যবহৃত কম্পোনেন্টের জন্য সংশ্লিষ্ট Material Module ইমপোর্ট করতে হবে। উদাহরণ:

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule
  ]
})
export class AppModule { }
থিম ফাইল যোগ করা

Angular Material থিম ফাইলটি স্বয়ংক্রিয়ভাবে আপনার প্রজেক্টে যোগ হয়ে যাবে। এটি angular.json ফাইলে styles সেকশনে দেখা যাবে:

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

Angular Material কম্পোনেন্ট ব্যবহার করা

Angular Material ইন্সটল এবং সেটআপ করার পরে আপনি এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি Button এবং Input Field যোগ করতে পারেন:

HTML
<button mat-raised-button color="primary">Click Me</button>
<mat-form-field>
  <mat-label>Enter your name</mat-label>
  <input matInput>
</mat-form-field>
CSS

প্রয়োজনে আপনার styles.css ফাইলে কাস্টম স্টাইল যোগ করতে পারেন।


Angular Material ইন্সটল ও সেটআপ করার পরে আপনি আপনার অ্যাপ্লিকেশনে ম্যাটেরিয়াল ডিজাইন কম্পোনেন্ট ব্যবহার করতে পারবেন। এটি দ্রুত এবং সহজেই একটি আধুনিক ও আকর্ষণীয় UI তৈরি করতে সহায়ক।

Content added By
Promotion